<template>
<div>
    <div v-if='isShow1'>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>过程管理</el-breadcrumb-item>
      <el-breadcrumb-item>报告管理</el-breadcrumb-item>
      <el-breadcrumb-item>测试报告详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button @click="back" icon="el-icon-arrow-left" size="mini" circle></el-button>
    <el-card>
    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >

        <el-form-item label="测试报告名称" prop="report_name">
          <el-input v-model="editForm.report_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目标识" prop="pro_index">
          <el-input v-model="editForm.pro_index" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属产品" prop="pro_system">
          <el-input v-model="editForm.pro_system" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="pro_leader">
          <el-select v-model="editForm.pro_leader" placeholder="请选择" disabled>
            <el-option
              v-for="item in usersList"
              :key="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目成员" prop="pro_members">
          <el-select v-model="editForm.pro_members" placeholder="请选择" multiple="true" disabled>
            <el-option
              v-for="item in usersList"
              :key="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目描述" prop="pro_description">
          <el-input
            type="textarea"
            v-model="editForm.pro_description"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="报告引用文件" prop="report_file">
          <el-input
            type="textarea"
            v-model="editForm.report_file"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="测试策略" prop="test_cl">
          <el-input
            type="textarea"
            v-model="editForm.test_cl"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="测试结果" prop="test_jg">
          <el-input
            type="textarea"
            v-model="editForm.test_jg"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="测评活动总结" prop="test_zj">
          <el-input
            type="textarea"
            v-model="editForm.test_zj"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="项目实际开始时间" required>
          <el-col :span="11">
            <el-form-item prop="report_starttime">
              <el-date-picker type="date" placeholder="选择日期" v-model="editForm.report_starttime" style="width: 100%;" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="项目实际结束时间" required>
          <el-col :span="11">
            <el-form-item prop="report_endtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="editForm.report_endtime" style="width: 100%;" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="其他" prop="other">
          <el-input
            type="textarea"
            v-model="editForm.other"
            disabled
          ></el-input>
        </el-form-item>



      </el-form>
    </el-card>
  </div>



  <div v-if='isShow2'>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>过程管理</el-breadcrumb-item>
      <el-breadcrumb-item>报告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getReportsList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getReportsList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">

        </el-col>
      </el-row>
      <!-- 报告列表区域 -->
      <el-table 
        :data="reportslist.slice((queryInfo.pagenum-1)*queryInfo.pagesize, queryInfo.pagenum*queryInfo.pagesize)"
        border stripe>
        <!-- ---:data="用于存放请求数据回来的数组" -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="测试报告名" prop="report_name"></el-table-column>
        <el-table-column label="项目标识" prop="pro_index"></el-table-column>
        <el-table-column label="所属产品" prop="pro_system"></el-table-column>
        <el-table-column label="项目负责人" prop="pro_leader"></el-table-column>
        <el-table-column label="测试结果" prop="test_jg"></el-table-column>
        <el-table-column label="开始时间" prop="report_starttime"></el-table-column>
        <el-table-column label="结束时间" prop="report_endtime"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!-- //--- 这里取到当前单元格 -->
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.$index)"
            ></el-button>
            <!-- 展示按钮 -->
            <el-button
              type="success"
              icon="el-icon-s-grid"
              size="mini"
              @click="viewReportById(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--  分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="reportslist.length"
      ></el-pagination>
      <!-- 添加报告的对话框 -->
      
      <!-- 修改报告对话框 -->
      <el-dialog
        title="修改项目信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <!-- 修改用户对话框 -->
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="100px"
        >

          <el-form-item label="测试报告名称" prop="report_name">
            <el-input v-model="editForm.report_name"></el-input>
          </el-form-item>
          <el-form-item label="项目标识" prop="pro_index">
            <el-input v-model="editForm.pro_index" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属产品" prop="pro_system">
            <el-input v-model="editForm.pro_system" disabled></el-input>
          </el-form-item>
          <el-form-item label="项目负责人" prop="pro_leader">
            <el-select v-model="editForm.pro_leader" placeholder="请选择" disabled>
              <el-option
                v-for="item in usersListl"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目成员" prop="pro_members">
            <el-select v-model="editForm.pro_members" placeholder="请选择" multiple="true" disabled>
              <el-option
                v-for="item in usersListm"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目描述" prop="pro_description">
            <el-input
              type="textarea"
              v-model="editForm.pro_description"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="报告引用文件" prop="report_file">
            <el-input
              type="textarea"
              v-model="editForm.report_file"
            ></el-input>
          </el-form-item>
          <el-form-item label="测试策略" prop="test_cl">
            <el-input
              type="textarea"
              v-model="editForm.test_cl"
            ></el-input>
          </el-form-item>
          <el-form-item label="测试结果" prop="test_jg">
            <el-input
              type="textarea"
              v-model="editForm.test_jg"
            ></el-input>
          </el-form-item>
          <el-form-item label="测评活动总结" prop="test_zj">
            <el-input
              type="textarea"
              v-model="editForm.test_zj"
            ></el-input>
          </el-form-item>

          <el-form-item label="项目实际开始时间" required>
            <el-col :span="11">
              <el-form-item prop="report_starttime">
                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.report_starttime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="项目实际结束时间" required>
            <el-col :span="11">
              <el-form-item prop="report_endtime">
                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.report_endtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="其他" prop="other">
            <el-input
              type="textarea"
              v-model="editForm.other"
            ></el-input>
          </el-form-item>

        </el-form>
        <!--  -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addReportInfo">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      isShow1:false,
      isShow2:true,
      //获取项目列表参数
      queryInfo: {
        query: "",
        pagenum: 1, //当前的页数
        pagesize: 5, //当前每页显示多少条
      },
      reportslist: [
        {
          report_name: "",
          pro_index: "",
          pro_system: "",
          pro_leader: "",
          test_jg: "",
          report_starttime: "",
          report_endtime: "",
        },
      ],
      total: 0,
      //控制添加对话框的显示与隐藏
      addDialogVisible: false,
      //控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 添加项目的表单数据
      addForm: {
        report_name: "",
        pro_index: "",
        pro_system: "",
        pro_leader: "",
        pro_members: "",
        pro_description: "",
        report_file: "",
        test_cl: "",
        test_jg: "",
        test_zj: "",
        report_starttime: "",
        report_endtime: "",
      },
      // 通过id获取用户数据
      editForm: {},
      // 所有用户信息列表
      usersList: [],
      usersListl: [],
      usersListm: [],
      // 通过id获取项目数据
      editForm: {},

      //添加表单的验证规则对象
      addFormRules: {
        plan_name: [
          { required: true, message: "请输入测试报告名称", trigger: "blur" }
        ]
      },
      //修改表单的验证规则对象
      editFormRules: {
        plan_name: [
          { required: true, message: "请输入测试报告名称", trigger: "blur" }
        ]
      },
    };
  },

  created() {
    this.getReportsList();
  },
  mounted: function() {
    this.view()
    this.get_user()
    this.get_userl()
    this.get_userm()
  },
  methods: {
    // 获取项目列表
    view(){
      this.$http.get('/api/report_view').then(res=>{
        this.reportslist = res.data
      });
    },
    get_user(){
      this.$http.get('/api/users_view').then(res=>{
        this.usersList = res.data
      });
    },
    get_userl(){
      this.$http.get('/api/users_viewl').then(res=>{
        this.usersListl = res.data
      });
    },
    get_userm(){
      this.$http.get('/api/users_viewm').then(res=>{
        this.usersListm = res.data
      });
    },
    // 查询
    async getReportsList() {
      this.$http.post('/api/report_search', this.queryInfo).then(res=>{
        this.reportslist = res.data
      });
      // if (res.meta.status !== 200) {
      //   return this.$message.error("获取项目列表失败！");
      // }
    },
    //点击按钮，添加新项目

    //监听添加项目对话框关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 展示编辑项目的对话框
    async showEditDialog(index) {
      this.editDialogVisible = true
      console.log(index)
      this.$http.post('/api/report_edit_open',{report_id:index}).then(res=>{
        this.editForm = res.data[0]
      });
      // if (res.meta.status !== 200) {
      //   return this.$message.error("查询项目信息失败！")
      // }
    },
    //监听修改项目对话框关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 修改项目信息，并提交
    addReportInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        //可以发起修改用户的网络请求
        this.$http.post('/api/report_edit',this.editForm).then(res=>{
          // 重新获取用户列表数据
          this.view()
        });
        // if (res.meta.status !== 200) {
        //   return this.$message.error("更新项目信息失败！")
        // }
        this.$message.success("更新测试计划信息成功！")
        // 隐藏更新用户信息对话框
        this.editDialogVisible = false
      })
    },

    // 展示项目详情
    viewReportById(index){
      this.isShow1 = true;
      this.isShow2 = false;
      this.$http.post('/api/report_edit_open',{report_id:index}).then(res=>{
        this.editForm = res.data[0]
      });
      // this.$router.push("/projects/projects_view")
    },
    back(){
      this.isShow1 = false;
      this.isShow2 = true;
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.view()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.view()
    },
  },
};
</script>

<style>
</style>